EaselJS: Mouse Interaction

Grundsätzlich ist das Easel JS Mausaktivitäten Interaktions Modell sehr einfach. Weise einem Display Object eine Handler Funktion für einen der Mausereignisse zu: circle.onClick = function(evt) { alert("clicked"); }

Es gibt einige Ereignisse auf die Display Objects hören können: onPress, onClick, onDoubleClick, onMouseOver, and onMouseOut.

Mit den beiden zuletzt genannten Events (onMouseOver, onMouseOut) ist etwas darüber liegendes verknüpft, Daher müssen diese Events aktiviert werden mit: stage.enableMouseOver(frequency). Der frequency Parameter bestimmt, wie oft per Sekunde EaselJS berechnen soll , was unter dem Pointer liegt. Ein höherer Wert sorgt für eine bessere Reaktionszeit aber benötigt auch mehr Rechnerpower. Der Standartwert liegt bei 20 mal pro Sekunde.

Wenn ein Mouse-handler ausgelöst wird, wird dieser mit einem einzigen Parameter aufgerufen, welcher eine Instanz von MouseEvent enthält. Man kann diesen Parameter nutzen, den Typ des Events zu erkennen type , was das Ziel ist (Instanz auf den dr Event registiert ist) target , get access to the nativeEvent object it was based on, oder die x und y Koordinaten des Pointers zu erkennen stageX and stageY. circle.onClick = function(evt) { alert("type: "+evt.type+" target: "+evt.target+" stageX: "+evt.stageX); }

Wenn man einen Mouse Handler einer Container Instanz zuweist, wird dieser alle Mouse Events blockieren, welche den Child- Elementen zugewiesen wurden, auch wenn sie ihre eigenen Event Listener haben.

In dem Beispiel unten gibt es einen "button" eine Container Instanz, welche 2 child-Element enthält. Alle 3 Instanzen haben onClick Handlers, aber nur der click Handler des Buttons wird aufgerufen.

Wenn man auf der Seite container.html den onClick Handler des "button" auskommentiert werden die Handler des "background" und "label" aktiv.

Man kann außerdem mouse events auf Kind Elemente blockieren ohne einen handler zuzuweisen, setze dazu: mouseChildren auf false. myContainer.mouseChildren = false;

Andererseits kann man mouse events auf display objects deaktvieren ohne die handler zu entfernen, setze dazu . mouseEnabled auf false. circle.onClick = function() { alert("Clicked!"); } circle.mouseEnabled = false;

Normalerweise berechnet EaselJS den sensitiven Bereich von Mausaktivitäten aufgrund der nicht transparenten Pixel eines Display Objects. Das ist in der Regel sinnvoll, es kann jedoch vorkommen, dass man einen anderen Bereich definieren will, der den sensitiven Bereich ausmacht.

Um das zu erreichen kann man irgendein Display Object als hitArea definieren. Es muss nicht in der Display Liste erscheinen addChild()und es ist nicht sichtbar aber es wird stattdessen für das hit test eingesetzt.

Hit area display objects werden innerhalb des Koordinaten Systems des owners genutzt und als solches kann man das gleiche Display Object als hitArea auf verschiedenen Display Objekten einsetzen.

var hit = new createjs.Shape();
hit.graphics.beginFill("#000").drawRect(0, 0, label2.getMeasuredWidth(), label2.getMeasuredHeight());
label2.hitArea = hit;

Wenn man mit der Maus über den roten Text geht, wird ein hit nur registriert wenn man über die nicht transparenten Pixel des Textfeldes geht, wobei im blauen Text ein Rechteck genutzt wird um den hitArea Bereich zu berechnen.

Wenn man eine normalen mouse event handler auf die stage registriert, wird dieser alle Mausereignisser aller child-elemente blockieren. Ebenso gilt, wie bei jedem anderen Display Object, dass man Ereignisse nur erhält, wenn der Mauszeiger sich über einem nicht transparenten Pixel befindet.

Stage hat ein paar spezielle mouse events, die sehr nützlich sind, wenn es darum geht, generell auf Maus Interaktionen innerhalb des canvas zu reagieren.onMouseDown, onMouseUp and onMouseMovewerden jederzeit aufgerufen wenn eine entsprechende Mausaktivität irgendwo im canvas erfolgt.

stage.onMouseDown = function(evt) { alert("the canvas was clicked at "+evt.stageX+","+evt.stageY); }

The following demo demonstrates using these events to let you finger paint on the canvas:

Standardmäßig bekommt man keine onMouseMove Events, wenn sich der Mauszeige außerhalb der canvas befindet. You can check of this has happened with stage.mouseInBounds.

Wenn man onMouseMove events erhalten möchte, auch wenn sich der Mauszeiger außerhalb der canvas befindet, setze die stage Eigenschaft mouseMoveOutside auf true. Die stageX & stageY Eigenschaften von MouseEvent geben immer einen Wert innerhalb der Begrenzung der Bühne zurück, aber rawX and rawY erzeugen Werte die nicht auf darauf beschränkt sind, das kann zu Fehlern führen, also aufpassen.

console.log() ist ein Befehl, der ähnlich wie der Actionscript trace() Befehl in der Firefox Konsole Werte anzeigt. Wähle dazu im Firefox, Extras, Web Entwickler, Web Konsole stage.mouseMoveOutside = true; stage.onMouseMove = function(evt) { console.log("stageX/Y: "+evt.stageX+","+evt.stageY); // always in bounds console.log("rawX/Y: "+evt.rawX+","+evt.rawY); // could be < 0, or > width/height }

EaselJS sorgt für eine einfache Implementierung der Drag and Drop Funktionalität. Wenn ein onPress Handler aufgerufen wird, wird ein MouseEvent übergeben der zwei spezielle Handler besitzt , onMouseMove and onMouseUp

Diese Handler arbeiten exakt genauso wie ihr Äquivalent on Stage mit einem Unterschied, Sie sind nur solange aktiv, bis der User den Mausknopf loslässt. Es hört sich ein bisschen merkwürdig an, ist aber sehr einfach zu handhaben. circle.onPress = function(evt) { // add handlers directly to the event object: evt.onMouseMove = function(evt) { evt.target.x = evt.stageX; evt.target.y = evt.stageY; } evt.onMouseUp = function(evt) { console.log("up"); } } Checke den Quellcode des Demo unten mit einem einfachen Beispiel. Dort kann man auch die mouseMoveOutside Eigenschaft sehr gut testen. Indem man mit rawX und rawY arbeitet, kann man das Objekt aus der Bühne heraus schieben.

Andere relevante Methoden für fortgeschrittene Maus Interaktionen sind:

• Container.getObjectUnderPoint() gibt das obenliegende Display Objekt unter dem Zielpunkt zurück
• Container.getObjectsUnderPoint() gibt alle Display Objekte unter dem Zielpunkt zurück
• DisplayObject.hitTest() gibt true zurück, wenn der ZIelpunkt im Display Objekt nicht transparent ist.